<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		h1{
			text-align: center;
		}
		.box{
			width: 720px;
			margin: 0 auto;
			margin-top: 20px;	
		}
		.box img{
			width: 100%;
			
		}
		.skye{
			width: 720px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-top: 20px;
			/*p{
				margin-right:10px ;
			}*/
		}
		.skye li{
			width: 64px;
			list-style: none;
			position: relative;
			margin: 0 10px;

		}
		.skye p{
			margin-right:10px ;
		}
		.show{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 300px;
			background: #191e25;
			padding: 20px;
			bottom: 80px;
			border: 1px solid #b59758;
			display: none;
		}
		.show h4{
			color: #b59758;
			border-bottom: 2px solid #b59758;
			text-align: center;
			padding: 10px 0;
		}
		.show p{
			padding-top:10px ;
			font-size: 14px;
			color: #ccc;
		}
		.sj{
			width: 30px;
			height: 30px;
			background: #191e25;
			border: 1px solid #b59758;
			position: absolute;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			border-top-color: transparent;
			border-left-color:transparent ;
			bottom: -15px;
		}
		.skye li:hover .show{
			display: inline-block;
		}
		.skye ul{
			display: flex;
		}
	</style>
</head>
<body>
	<h1>黑暗子女——安妮简介</h1>
	<div class="box">
		<img src="https://game.gtimg.cn/images/lol/act/img/center/0b95894e-0df2-470e-b282-6c5f5cf41955.jpg">
	</div>
	<div class="skye">
		<p>技能描述</p>
		<ul>
			<!-- <li>
				<img src="https://game.gtimg.cn/images/lol/act/img/spell/AnnieE.png">
				<div class="show">
					<h4>枪林弹雨</h4>
					<p>
						安妮为一名友方英雄提供持续3秒的(【60/95/130/165/200】+40%【法术强度】)护盾值，以及在1.5秒里持续衰减的(20%-50%【随等级提升】)移动速度。当护盾处于激活状态时，敌人用攻击或技能对护盾造成伤害时会受到(【25/35/45/55/65】+40%【法术强度】)魔法伤害，每个护盾受到一次伤害。 提伯斯在被召唤出来时总会获得熔岩护盾的效果。
					</p>
					<div class="sj"></div>	
				</div>
			</li> -->
		</ul>
		
	</div>
	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript">
	// url传来的参数   ?id=38
	console.log(location.search.split("=")[1])
	let id = location.search.split("=")[1]
	let h1 = document.querySelector("h1")
	let img = document.querySelector(".box img")
	let ul = document.querySelector("ul")
	ajax({
		method:"get",
		url:`https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js?ts=2734602`,
		success:function(res){
			console.log(res)
			h1.innerText = `${res.hero.name}——${res.hero.title}简介:`
			img.src = res.skins[0].mainImg
			for(let i = 0; i < res.spells.length; i++){
				ul.innerHTML += `<li>
				<img src="${res.spells[i].abilityIconPath}">
				<div class="show">
					<h4>${res.spells[i].name}</h4>
					<p>
						${res.spells[i].description}
					</p>
					<div class="sj"></div>	
				</div>
			</li>`
			}
		}

	})
	

	</script>
</body>

</html>